<template>
    <view class="consultationDetail pb-150">
        <Navigation backType="back" title="问诊详情" background="#fff" />
        <view class="background-white ph-32 pv-32 f jc-s-b list border">
            <image :src="detail.memberDoctorDO.avatar" class="w-120 h-120 b-12 mr-20 mt-10"></image>
            <view class="f fd-c f1">
                <view class="f ai-c jc-s-b w-f">
                    <view class="f ai-c f1">
                        <view class="fs-30 fw-600 text-color4">{{detail.memberDoctorDO.name}}</view>
                        <view class="ph-6 h-28 b-4 f ai-c jc-c fs-20 level ml-12">{{detail.memberDoctorDO.title}}</view>
                    </view>
                </view>
                <!-- <view class="f mt-16 ai-c">
                    <view class="f">
                        <image :src="index < rate - 1 ? star : starSelect" class="w-24 h-24 mr-8" v-for="(item, index) in 5" :key="index"></image>
                    </view>
                    <view class="fs-28 fw-600 text-color ml-12">4.2</view>
                </view> -->
                <view class="f mt-16">
                    <view class="h-28 ph-6 fs-20 text-color8 mr-14 tag" v-for="(item,index) in detail.memberDoctorDO.labelNames">{{item}}</view>
                    <!-- <view class="h-28 ph-6 fs-20 text-color8 mr-14 tag">服务之星</view> -->
                </view>
                <view class="f mt-12">
                    <view class="fs-24 text-color3">个人简介：</view>
                    <view class="f f1 text-ellipsis-1 text-color4 fs-24">{{detail.memberDoctorDO.introduction}}</view>
                </view>
               <!-- <view class="f mt-12">
                    <view class="h-28 ph-6 fs-20 mr-14 tag2">服务之星</view>
                    <view class="h-28 ph-6 fs-20 mr-14 tag2">服务之星</view>
                </view> -->
            </view>
        </view>
        <view class="background-white ph-32 pt-32 pb-12 mt-20">
            <view class="mb-20 f">
                <view class="fs-26 text-color4 mr-32">订单编号</view>
                <view class="fs-26 fw-500 text-color1 f ai-c"
                    >{{detail.no}}<view class="w-72 h-32 b-32 f ai-c jc-c fs-22 text-color1 copy ml-16" @click='copy'>复制</view></view
                >
            </view>
           <!-- <view class="mb-20 f">
                <view class="fs-26 text-color4 mr-32">订单状态</view>
                <view class="fs-26 fw-500 text-color1 f ai-c">--</view>
            </view> -->
            <view class="mb-20 f">
                <view class="fs-26 text-color4 mr-32">订单状态</view>
                <view class="fs-26 fw-500 text-color1 f ai-c">{{statusList[detail.status]}}</view>
            </view>
            <view class="mb-20 f">
                <view class="fs-26 text-color4 mr-32">支付方式</view>
                <view class="fs-26 fw-500 text-color1 f ai-c">微信支付</view>
            </view>
            <view class="mb-20 f">
                <view class="fs-26 text-color4 mr-32">支付金额</view>
                <view class="fs-26 fw-500 text-color1"></view>
                <view class="text-color7 fs-26 fw-600">¥{{detail.totalPrice}}</view>
            </view>
            <view class="mb-20 f" v-if="detail.payTime">
                <view class="fs-26 text-color4 mr-32">支付时间</view>
                <view class="fs-26 fw-500 text-color1 f ai-c">{{detail.payTimeData}}</view>
            </view>
            <view class="mb-20 f" v-if="detail.finishTime">
                <view class="fs-26 text-color4 mr-32">结束时间</view>
                <view class="fs-26 fw-500 text-color1 f ai-c">{{detail.finishTimeData}}</view>
            </view>
        </view>
        <view :style="{ paddingBottom: safeAreaBottom + 'px' }" class="bot w-f" v-if="detail.payStatus==0">
            <view class="f jc-f-e h-128 ai-c ph-40">
                <view class="w-152 h-64 b-64 f ai-c jc-c fs-26 text-color4 border ml-16"  @click.stop="del(detail)">取消订单</view>
                <view class="w-152 h-64 b-64 f ai-c jc-c fs-26 text-color5 pay ml-16">立即支付</view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref,getCurrentInstance } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import star from '@/static/index/star.png';
import starSelect from '@/static/index/star-select.png';
import { orderDetail,orderDelte } from '@/services/api/index/index';
const { proxy } = getCurrentInstance();
const id = ref<string>();
const detail = ref<any>([]);
const statusList = ref<any>(['待付款','咨询中','已完成']);
onLoad((options: any) => {
    id.value = options.id;
    getDetail();
});

//获取详情
async function getDetail() {
    const { data } = await orderDetail({ id: id.value });
	data.memberDoctorDO.labelNames = data.memberDoctorDO.labelNames.split(',')
	data.payTimeData = proxy.$moment(data.payTime).format('YYYY/MM/DD HH:mm:ss');
	data.finishTimeData = proxy.$moment(data.finishTime).format('YYYY/MM/DD HH:mm:ss');
    detail.value = data;
}
function copy() {
     uni.setClipboardData({
            data: detail.value.no,
            success: function () {
               uni.showToast({
                   title: '复制成功',
                   icon: 'none',
               });
            }
        });
}
async function del(item: any) {
     await orderDelte(item.id);
    	uni.showToast({
    	    title: '删除成功',
    	    icon: 'none',
    	});
	uni.navigateBack()
}
//底部安全距离
const systemInfo = uni.getSystemInfoSync();
let safeArea = systemInfo.safeArea;
let screenHeight = systemInfo.screenHeight;
let safeAreaBottom = screenHeight - safeArea.bottom;
</script>
<style lang="scss" scoped>
.consultationDetail {
    background: #f5f5f5;
    min-height: 100vh;
    .copy {
        background: #f5f5f5;
    }
    .tag2 {
        background: #f0f2f5;
        color: #5769a0;
    }
    .tag {
        background: #fff5f5;
    }
    .level {
        color: #fac519;
        background: #fff9e6;
    }
    .border {
        border: 1rpx solid #dddddd;
    }
    .background-white {
        background: #fff;
    }
    .pay {
        background: #fabb3c;
    }
    .border {
        border: 1rpx solid #dddddd;
    }
    .bot {
        position: fixed;
        left: 0;
        bottom: 0;
        background: #fff;
    }
}
</style>
